/* 学生卡片样式 */
.studentCard {
  @apply transition-all duration-200 hover:shadow-md;
  border-radius: 8px;
  margin-bottom: 16px;
}

.studentCard.selected {
  @apply border-blue-500 shadow-md;
  border-width: 2px;
}

.cardTitle {
  @apply flex items-center gap-2;
}

.checkbox {
  @apply flex-shrink-0;
}

.titleIcon {
  @apply text-blue-500 flex-shrink-0;
}

.studentName {
  @apply font-medium text-gray-900 flex-1 truncate;
  font-size: 14px;
}

.cardContent {
  @apply space-y-2;
}

.infoRow {
  @apply flex items-center gap-1;
  font-size: 13px;
}

.label {
  @apply text-gray-600 flex-shrink-0;
  min-width: 40px;
}

.value {
  @apply text-gray-900 flex-1;
}

.phoneIcon {
  @apply text-green-500 flex-shrink-0;
}

.remarkRow {
  @apply flex flex-col gap-1 pt-2 border-t border-gray-100;
}

.remark {
  @apply text-gray-600 text-xs leading-relaxed;
  word-break: break-all;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .studentCard {
    margin-bottom: 12px;
  }
  
  .cardTitle {
    @apply flex-wrap;
  }
  
  .studentName {
    font-size: 13px;
  }
  
  .infoRow {
    font-size: 12px;
  }
  
  .label {
    min-width: 36px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .studentCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .studentName {
    @apply text-gray-100;
  }
  
  .value {
    @apply text-gray-200;
  }
  
  .label {
    @apply text-gray-400;
  }
  
  .remark {
    @apply text-gray-400;
  }
  
  .remarkRow {
    @apply border-gray-700;
  }
}